<template>
  <view>
    <view class="example-body">
      <view class="ordering" type="primary" @click="showDrawer('showLeft')"> </view>
      <uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event, 'showLeft')">
        <view class="scroll-view">
          <scroll-view class="scroll-view-box" :scroll-y="true">
            <view class="close">
              <button @click="closeDrawer('showLeft')">
                <text class="word-btn-white">关闭Drawer</text>
              </button>
            </view>
            <view class="info-content" v-for="item in 100" :key="item">
              <text>可滚动内容 {{ item }}</text>
            </view>
          </scroll-view>
        </view>
      </uni-drawer>
    </view>
  </view>
</template>

<script lang="ts">
import uniDrawer from '@dcloudio/uni-ui/lib/uni-drawer/uni-drawer.vue'
export default {
  components: { uniDrawer },
  data() {
    return {
      showLeft: false,
    }
  },
  methods: {
    confirm() {},
    // 打开窗口
    showDrawer(e: 'showLeft') {
      ;(this.$refs[e] as any)?.open()
    },
    // 关闭窗口
    closeDrawer(e: 'showLeft') {
      ;(this.$refs[e] as any)?.close()
    },
    // 抽屉状态发生变化触发
    change(e: boolean, type: 'showLeft') {
      this[type] = e
    },
  },
  onNavigationBarButtonTap() {
    if (this.showLeft) {
      ;(this.$refs.showLeft as any).close()
    } else {
      ;(this.$refs.showLeft as any).open()
    }
  },
  // app端拦截返回事件 ，仅app端生效
  onBackPress() {
    if (this.showLeft) {
      ;(this.$refs.showLeft as any).close()
      return true
    }
  },
}
</script>

<style scoped lang="scss">
.example-body {
  padding: 10px;

  .ordering {
    width: 50px;
    height: 50px;
  }
}

.scroll-view {
  padding-top: 60px;
  width: 300px;
  height: 300px;
  flex: 1;
}

// 处理抽屉内容滚动
.scroll-view-box {
  flex: 1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.info {
  padding: 15px;
  color: #666;
}

.info-content {
  padding: 2px 15px;
  overflow: hidden;
}

.close {
  padding: 50px;
}
</style>
